<template>
  <div class="hotkey-detail">
    <ul class="group-list">
      <li class="group-item"
        v-for="(g,key, i) in groupList"
        :key="i">
        <p class="group-title">{{key}}</p>
        <ul class="key-list">
          <li class="key-item"
            v-for="(ks, i) in g"
            :key="i">
            <span v-for="(k, j) in ks.key"
              :key="j"
              class="key-value"
              :class="[mod.includes(k)?'key-mod': '']">{{k}}</span>
            <p class="key-disc">{{ks.name}}</p>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>
<script>
import * as anov from 'anov-core'

export default {
  name: 'HotkeysMore',
  components: {},
  model: {},
  props: {},
  data() {
    return {
      keyList: [],
      mod: ['⇧', 'shift', '⌥', 'alt', 'option', '⌃', 'ctrl', 'control', '⌘', 'cmd', 'command']
    }
  },
  computed: {
    groupList() {
      let group = {}
      this.keyList.forEach(key => {
        let type = key.type || 'default'
        if (group[type]) {
          group[type].push(key)
        } else {
          group[type] = []
          group[type].push(key)
        }
      })
      return group
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.mixData()
  },
  beforeDestroy() {},
  methods: {
    mixData() {
      let actions = anov.actionServer.getActions(),
        hotkeys = anov.hotkeyServer.getHotkeys()
      for (let i = 0; i < hotkeys.length; i++) {
        for (let j = 0; j < actions.length; j++) {
          if (hotkeys[i].action === actions[j].id) {
            let key = hotkeys[i].key.replace(/\+(?=\w|\S|\+)/gi, ' ').split(' '),
              type = hotkeys[i].type
            this.keyList.push({
              key,
              type,
              name: actions[j].name
            })
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.hotkey-detail {
  padding: 20px;
  .group-list {
    .group-item {
      .group-title {
        padding: 0 0 10px 0;

        color: #8db5b2;

        font-size: 14px;
        text-transform: capitalize;
      }
    }
  }
  .key-list {
    .key-item {
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      margin-bottom: 12px;
      .key-value {
        display: inline-block;

        margin-right: 16px;
        padding: 2px 6px;
        border-radius: 2px;

        color: #f3a712;
        background-color: #2b303c;

        box-shadow: 2px 2px 5px rgba(0,0,0,.3);

        text-transform: capitalize;
        &:nth-last-of-type(n + 2) {
          position: relative;
          &:after {
            position: absolute;
            top: 0;
            right: -12px;

            color: #c1fffb;

            opacity: .6;

            content: '+';
          }
        }
        &:nth-last-of-type(1) {
          margin-right: 0;
        }
      }
      .key-mod {
        color: #f3a712;
      }
      .key-disc {
        margin-left: auto;

        opacity: .8;

        font-size: 12px;
        white-space: nowrap;
      }
    }
  }
}
</style>